<template>
  <div>
    <div class="btn">
      <el-button type="primary" @click="add">添加景点</el-button>
    </div>
    <el-table
      :data="list"
      style="width: 100%;" v-loading="loading">
      <el-table-column
        label="Id"
        width="80">
        <template slot-scope="scope">
          {{scope.row.s_id}}
        </template>
      </el-table-column>
      <el-table-column
        label="景点名称"
        width="210">
        <template slot-scope="scope">
          {{scope.row.s_name}}
        </template>
      </el-table-column>
      <el-table-column
        label="景点标题"
        width="250">
        <template slot-scope="scope">
          {{scope.row.s_title}}
        </template>
      </el-table-column>
      <el-table-column
        label="景点图片"
        width="250">
        <template slot-scope="scope">
          <img width="200" :src="scope.row.s_icon"/>
        </template>
      </el-table-column>
      <el-table-column
        label="门票价格"
        width="150">
        <template slot-scope="scope">
          {{scope.row.s_ticket}} 元
        </template>
      </el-table-column>
      <el-table-column
        label="每天开放时间"
        width="150">
        <template slot-scope="scope">
          {{scope.row.s_open[0]}}-{{scope.row.s_open[1]}}
        </template>
      </el-table-column>
      <el-table-column
        label="每周开放时间"
        width="150">
        <template slot-scope="scope">
          {{scope.row.s_week[0]}}-{{scope.row.s_week[1]}}
        </template>
      </el-table-column>
      <el-table-column
        label="每年开放时间"
        width="150">
        <template slot-scope="scope">
          {{scope.row.s_month[0]}}-{{scope.row.s_month[1]}}
        </template>
      </el-table-column>
      <el-table-column
        label="操作">
        <template slot-scope="scope">
          <el-button type="primary" size="small" @click="upda(scope.row.s_id)">编辑景点</el-button>
          <el-button type="danger" size="small" @click="dele(scope.row.s_id)">删除景点</el-button>
        </template>
      </el-table-column>
    </el-table>

    <div style="height:20px;"></div>

    <el-pagination
      background
      layout="prev, pager, next"
      :total="count"
      :page-size="length"
      :current-page="page"
      @current-change="setPage"
      class="page"
    >
    </el-pagination>
  </div>
</template>

<script>
  export default{
    data(){
      return{
        page:1,
        length:0,
        count:0,
        loading:true,
        list:null
      }
    },methods:{
      onLoad:function(page=1){
        var that=this

        this.$axios.post('/admin.php/scenic/show',this.$qs.stringify({page:page})).then(
          (res)=>{
            if(res.data.code==1){
              that.loading=false;
              that.page=res.data.data.page;
              that.length=res.data.data.length;
              that.count=res.data.data.count;
              that.list=res.data.data.list;

              that.$notify({
                title: '成功',
                message: '加载成功',
                type: 'success'
              });
            }else{
              that.loading=false;
              that.list=null;

              that.$notify.info({
                title: '消息',
                message: res.data.msg
              });
            }
          }
        ).catch(
          (res)=>{
            that.$notify({
              title: '警告',
              message: '网络繁忙',
              type: 'warning'
            });
          }
        )
      },
      setPage:function(page){
        this.onLoad(page);
      },
      add:function(){
        this.$router.push({path:'/admin/scenic_edit'});
      },
      upda:function(id){
        this.$router.push({path:'/admin/scenic_edit',query:{id:id}});
      },
      dele:function(id){
        this.$confirm('此操作将永久删除该景点, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          var that=this;

          this.$axios.post('/admin.php/scenic/dele_btn',this.$qs.stringify({id:id})).then(
            (res)=>{
              if(res.data.code==1){
                that.$message({
                  type: 'success',
                  message: '删除成功!'
                });

                that.onLoad();
              }else{
                that.$message({
                  type: 'success',
                  message: res.data.msg
                });
              }
            }
          ).catch(
            (res)=>{
              that.$message({
                type: 'warning',
                message: '网络繁忙'
              });
            }
          )
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      }
    },created(){
      this.onLoad();
    }
  }
</script>

<style>
  .el-table table tr th{
    text-align: center;
  }
  .el-table table tr .cell{
    text-align: center;
  }
  .btn{
    margin:10px 0;
  }
</style>
